<template>
  <!--packageF/consumption/evaluate/evaluate.wxml-->
  <div class="evaluate-page">
    <c-title :hide="false" text="评价"></c-title>
    <div class="explain">发表客观评价，可以帮助我们更快的成长</div>
    <div class="evaluate-title">对{{ storeName }}的评价</div>
    <div class="select-list flex">
      <block v-for="(item, index) in recommendList" :key="index">
        <div class="select-item flex-a-c flex-j-c" @click="onRecommend(item.type)">
          <img :src="evaluateType === item.type ? item.onImage : item.image" class="recommend" />
          <span :class="evaluateType === item.type ? 'on' : ''">{{ item.name }}</span>
        </div>
      </block>
    </div>

    <div class="evaluate-content">
      <form>
        <textarea placeholder="口味、服务、环境如何？" placeholder-style="font-size: 0.8462rem;color: #b5b5b5;" v-model="comment" bindblur="evaluateText"></textarea>
        <div class="explain text-l">您的真实感受可以帮助我们更好的提升我们的服务，感谢您的评价！</div>
        <div class="attestation-another flex-a-c">
          <block v-for="(item, index) in images" :key="index">
            <div class="another">
              <img :src="item" class="another-img" />
              <i @click="removeImg_1(index)"></i>
            </div>
          </block>
          <van-uploader :after-read="multipleMethod" multiple>
            <div class="banner-outline flex-a-c flex-j-c">
              <div class="crucifix"></div>
            </div>
          </van-uploader>
        </div>
      </form>
    </div>
    <van-dialog id="van-dialog" />
    <div class="evaluate-btn" @click="evaluateForm">提交</div>
  </div>
</template>
<script>
import evaluate_controller from "./evaluate_controller.js";
export default evaluate_controller;
</script>
<style lang="scss" scoped>
.explain {
  font-size: 0.6875rem;
  color: #ffb536;
  margin: 1.0938rem auto;
  text-align: center;
}

.text-l {
  text-align: left;
}

.evaluate-title {
  font-size: 0.9375rem;
  color: #222;
  text-align: center;
  margin: 0 0.625rem 1.0313rem 0.625rem;
}

.select-list {
  margin: 0 1.8125rem;
}

.select-item {
  width: 6.0313rem;
  height: 1.9375rem;
  background-color: #fff;
  margin: 0 0.875rem 0 0;

  span {
    font-size: 0.7163rem;
    color: #979797;
  }

  .on {
    color: #222;
  }

  .recommend {
    width: 1.3438rem;
    height: 1.3125rem;
    margin-right: 0.25rem;
    margin-left: 0;
  }
}

.evaluate-content {
  margin: 1rem 0.625rem 0 0.625rem;
  background-color: #fff;
  padding: 1rem 0 0.7813rem 0.8125rem;

  .explain {
    font-size: 0.6509rem;
    color: #ccc;
  }
}

.attestation-another {
  flex-wrap: wrap;
}

.evaluate-btn {
  margin: 3.125rem 0.5625rem 0 0.5625rem;
  width: 22.3438rem;
  height: 2.9063rem;
  line-height: 2.9063rem;
  text-align: center;
  background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  color: #fff;
}

.banner-outline {
  width: 5.625rem;
  height: 3.75rem;
  border: 0.0625rem dashed #a1a1a1;

  img {
    width: 5.625rem;
    height: 3.75rem;
  }
}

.evaluate-content form {
  text-align: left;
}

.evaluate-content textarea {
  width: 18.75rem;
  height: 9.375rem;
  border: none;
}

.crucifix {
  /* 十字架样式 */
  width: 1.2813rem;
  height: 0.125rem;
  background: #b2b2b2;
  border-radius: 0.0625rem;
  position: relative;

  &::after {
    content: "";
    width: 1.2813rem;
    height: 0.125rem;
    background: #b2b2b2;
    border-radius: 0.0625rem;
    position: absolute;
    left: 0;
    transform: rotate(-90deg);
  }
}

.another {
  width: 5.625rem;
  height: 3.75rem;
  margin-right: 0.3125rem;
  margin-bottom: 0.3125rem;
  position: relative;

  img {
    width: 5.625rem;
    height: 3.75rem;
  }

  i {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    background: url();
    background-size: 100%;
  }
}
</style>
